import React from 'react';
import { NavBar } from 'antd-mobile';
import { history } from 'umi'
import { primaryColor } from '@/defaultSettings';
import cn from 'classnames';
import Button from '../Button';
import icon from '../../../images/icon-back.png';
import styles from './index.less';

const CustomNavBar = ({ submitText, submitLoading = false, onSubmit, children, isFixed, ...rest }) => (
    <NavBar
        className={cn(styles.customNavBar, { [styles.isFixed]: isFixed })}
        mode="light"
        icon={<img src={icon} alt="" width="24" height="24" />}
        rightContent={
            submitText && (
                <Button
                    loading={submitLoading}
                    style={{ width: 'auto', border: 'none', padding: 0, color: primaryColor, fontWeight: 500 }}
                    onClick={onSubmit}
                >
                    {submitText}
                </Button>
            )
        }
        onLeftClick={() => history.goBack()}
        {...rest}
    >
        {children}
    </NavBar>
);

export default CustomNavBar;
